<template>
	<div style="background: #eee;padding: 10px;">
		<Table ref="table" height="600" :loading="loading" stripe border :columns="cols" :data="data" @on-select="selectItem" @on-select-cancel="cancelItem" @on-select-all="selectItemAll" @on-selection-change="selectChange"></Table>
		<Page ref="page" :total="count" :page-size="size" show-total show-elevator show-sizer @on-change="change" @on-page-size-change="pageChange" style="float: right;margin-top: 15px;margin-bottom: 15px"></Page>
		<ButtonGroup style="float: left;margin-top: 15px;margin-bottom: 15px">
			<Button @click="passSelect">通过所选</Button>
			<Button @click="deleteSelect">删除所选</Button>
			<Button @click="exportData" type="primary">
				<Icon type="ios-download-outline"></Icon>
				数据导出
			</Button>
		</ButtonGroup>
	</div>
</template>
<script>
	export default {
		data() {
			return {
				name: 'backend',
				loading: true,
				cols: [
					{
						type: 'selection',
						width: 60,
						align: 'center',
						fixed: 'left'
					},
					{
						title: '姓名',
						key: 'username',
						sortable: true,
						filters: [],
						filterMethod(value, row) {
							return row.user.indexOf(value) > -1;
						}
					},
					{
						title: '工号',
						key: 'usernumber'
					},
					{
						title: '开始日期',
						key: 'start_date'
					},
					{
						title: '结束日期',
						key: 'end_date'
					},
					{
						title: '请假类型',
						key: 'type',
						sortable: true
					},
					{
						title: '请假时长(小时)',
						key: 'time'
					},
					{
						title: '请假事由',
						key: 'reason',
						ellipsis: true
					},
					{
						title: '是否通过',
						key: 'pass',
						sortable: true,
						render: (h, params) => {
							const row = params.row;
							const color = row.pass.toString() === 'true' ? 'success' : 'error';
							const text = row.pass.toString() === 'true' ? '已通过' : '未通过';
							return h('Tag', {
								props: {
									type: 'dot',
									color: color
								}
							}, text);
						}
					}
				],
				data: [],
				count: 0,
				size: 15,
				tmpData: [],
				selectDataRows: []
			}
		},
		methods: {
			getLeaveInfo() {
				this.$ajax({
					method: 'get',
					url: '/getAttendanceInfo/getLeaveInfo',
				})
					.then(response => {
						this.tmpData = response.data.data;
						this.count = response.data.count;
						this.handleHistoryDate();
						this.doFilters();
						this.loading = false;
					})
					.catch(error => {
						console.log(error);
					});
			},
			handleHistoryDate() {
				if (this.count < this.size) {
					this.data = this.tmpData;
				} else {
					this.data = this.tmpData.slice(0, this.size);
				}
			},
			change(index) {
				let _start = (index - 1) * this.size;
				let _end = index * this.size;
				this.data = this.tmpData.slice(_start, _end);
			},
			pageChange(index) {
				this.size = index;
				this.handleHistoryDate();
			},
			passSelect() {
				this.$refs['page'].currentPage = 1;
				this.doHandleLeavePass(this.selectDataRows, "pass");
				this.selectDataRows = [];
			},
			deleteSelect() {
				this.$refs['page'].currentPage = 1;
				this.doHandleLeavePass(this.selectDataRows, "del");
				this.selectDataRows = [];
			},
			selectItem(selection, row) {
				this.selectDataRows.push(row);
			},
			cancelItem(selection, row) {
				this.selectDataRows.forEach((item, index) => {
					if (item.leave_id === row.leave_id) {
						this.selectDataRows.splice(index, 1);
					}
				});
			},
			selectItemAll(selection) {
				//先清除
				for (let i = 0; i < this.selectDataRows.length; i++) {
					this.selectDataRows.splice(i, selection.length);
				}
				this.selectDataRows = this.selectDataRows.concat(selection)
			},
			selectChange(selection) {
				if (!selection.length) {
					let arr1 = this.selectDataRows;
					let arr2 = this.data;
					for (let i = 0; i < arr1.length; i++) {
						for (let j = 0; j < arr2.length; j++) {
							if (arr1[i].leave_id === arr2[j].leave_id) {
								this.selectDataRows.splice(i, 1);
							}
						}
					}
				}
			},
			doHandleLeavePass(selection, type) {
				let str;
				if (type === 'pass') {
					str = '通过';
				} else if (type === 'del') {
					str = '删除';
				}
				this.$ajax({
					method: 'post',
					url: '/getAttendanceInfo/doHandleLeave',
					data: {params: selection, type: type}
				})
					.then(response => {
						if (response.data.code === 0) {
							this.getLeaveInfo();
							this.$Notice.success({
								title: str + '操作成功'
							});
						}
					})
					.catch(error => {
						console.log(error);
						this.$Notice.error({
							title: str + '操作失败'
						});
					});
				this.tmpData = [];
			},
			exportData() {
				this.$refs.table.exportCsv({
					filename: '请假数据'
				})
			},
			doFilters() {
				const tmp = Array.from(new Set(this.data.map(function (k) {
					return k.username;
				})));
				this.cols[1].filters = tmp.map(function (k) {
					return {
						label: k,
						value: k
					}
				})
			}
		},
		created() {
			this.getLeaveInfo();
		}
	}
</script>
